<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>EDI Explorer - Options</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="options.js"></script>
    <style type="text/css">
      body {
        font-family: Arial, Tahoma, sans-serif;
        margin-top: 0px;
        padding-top: 0px;
      }
      h1 {
        margin-top: 0px;
        color: #F8F8FF;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBBBB), to(gray));
        border-radius: 0px 0px 10px 10px;
        padding: 5px 10px;
        text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 1px;
        font-size: 150%;
        text-align: center;
        -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 5px;
      }
      label {
        float: left;
        width: 20em;
        padding-right: 20px;
        text-align: right;
      }
      div.field {
        padding-top: 5px;
      }
      #container {
        margin: auto;
        width: 600px;
        margin-top: 0px;
        padding-top: 0px;
      }
      #saveStatusMessage {
        display: block;
        position: fixed;
        top: 45%;
        left: 0px;
        text-align: center;
        color: white;
        font-weight: bold;
        text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBBBB), to(gray));
        border-radius: 0px 15px 15px 0px;
        padding: 10px 20px;
        opacity: 0;
        -webkit-transition: opacity 1.5s ease;
      }
      fieldset {
        background: #F8F8FF;
        border: 1px #CCC solid;
        border-radius: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 5px;
      }
      legend {
        background: #F8F8FF;
        border: 1px #CCC solid;
        padding: 5px 10px;
        text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px;
        color: #777;
        font-size: 110%;
      }
      input, select {
        margin-left: 0px;
      }
      input[type=text] {
        width: 2.25em;
      }
      input[type=button] {
        display: block;
        position: fixed;
        top: 45%;
        right: -2px;
        text-align: center;
        color: white;
        font-weight: bold;
        text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#BBB), to(#888));
        border: 1px grey solid;
        border-right: none;
        border-radius: 15px 0px 0px 15px;
        padding: 10px 20px;
        -webkit-transition: opacity 1.5s ease;
        
        cursor: pointer;
        font-size: 120%;
        font-weight: bold;
      }

      input[type=button]:hover {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#777));
      }

      input[type=button]:active {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#888), to(#BBB));
      }
      
      .license {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1>EDI Explorer Options</h1>
      <fieldset>
        <legend>General</legend>
        <div class="field">
          <label for="clickModifier">Mouse lookup modifier:</label>
          <select id="clickModifier">
            <option value="None">None</option>
            <option value="Ctrl">Ctrl</option>
            <option value="Alt">Alt</option>
            <option value="Meta">Command (Mac)</option>
            <option value="Ctrl+Alt">Ctrl+Alt</option>
          </select>
        </div>
        <div class="field">
          <label for="hideWithEscape">Hide popup with Esc:</label>
          <input type="checkbox" id="hideWithEscape" />
        </div>
      </fieldset>
      <fieldset>
        <legend>Keyboard Shortcut</legend>
        <div class="field">
          <label for="shortcutEnable">Enable shortcut:</label>
          <input type="checkbox" id="shortcutEnable" />
        </div>
        <div class="field">
          <label for="shortcutModifier">Shortcut modifier:</label>
          <select id="shortcutModifier">
            <option value="Ctrl">Ctrl</option>
            <option value="Alt">Alt</option>
            <option value="Meta">Command (Mac)</option>
            <option value="Ctrl+Alt">Ctrl+Alt</option>
            <option value="Ctrl+Shift">Ctrl+Shift</option>
            <option value="Alt+Shift">Alt+Shift</option>
          </select>
        </div>
        <div class="field">
          <label for="shortcutKey">Shortcut key:</label>
          <select id="shortcutKey">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
            <option value="G">G</option>
            <option value="H">H</option>
            <option value="I">I</option>
            <option value="J">J</option>
            <option value="K">K</option>
            <option value="L">L</option>
            <option value="M">M</option>
            <option value="N">N</option>
            <option value="O">O</option>
            <option value="P">P</option>
            <option value="Q">Q</option>
            <option value="R">R</option>
            <option value="S">S</option>
            <option value="T">T</option>
            <option value="U">U</option>
            <option value="V">V</option>
            <option value="W">W</option>
            <option value="X">X</option>
            <option value="Y">Y</option>
            <option value="Z">Z</option>
            <option value="`">`</option>
          </select>
        </div>
        <div class="field">
          <label for="shortcutSelection">Shortcut looks up selection:</label>
          <input type="checkbox" id="shortcutSelection" />
        </div>
      </fieldset>
      <fieldset>
        <legend>Sizing</legend>
        <div class="field">
          <label for="frameWidth">Popup width:</label>
          <input type="text" id="frameWidth" />
        </div>
        <div class="field">
          <label for="frameHeight">Popup height:</label>
          <input type="text" id="frameHeight" />
        </div>
        <div class="field">
          <label for="queryFormWidth">Manual query form width:</label>
          <input type="text" id="queryFormWidth" />
        </div>
        <div class="field">
          <label for="saveFrameSize">Remember size:</label>
          <input type="checkbox" id="saveFrameSize" />
        </div>
      </fieldset>
      <fieldset>
        <legend>License</legend>
        <div class="field license">
          EDI Explorer is licensed to NoRanj Inc. <a href="http://www.noranj.com">NoRanj</a> 
        </div>
      </fieldset>
      <input type="button" id="saveOptions" value="Save" />
      <div id="saveStatusMessage">Options saved.</div>
    </div>
  </body>
</html>
    
